<template>
  <div>
    <div class="top">
      <div class="top-op">
        <div class="search-panel">
          <el-input
            clearable
            placeholder="请输入文件名"
            v-model="fileNameFuzzy"
            @keyup.enter="search"
          >
            <template #suffix>
              <i
                class="iconfont icon-search"
                style="cursor: pointer"
                @click="search"
              ></i>
            </template>
          </el-input>
        </div>

        <div class="iconfont icon-refresh" @click="loadDataList"></div>
        <el-button
          style="margin-left:10px"
          type="primary"
          :disabled="selectFileIdList.length == 0"
          @click="delFileBetch"
        >
          <span class="iconfont icon-del"></span>
          批量删除
        </el-button>
      </div>
      <!-- 导航 -->

      <Navigation
        ref="navigationRef"
        :caseType="3"
        @navChange="navChange"
      ></Navigation>
    </div>
    <div class="file-list" v-if="tableData.list && tableData.list.length > 0">
      <Table
        ref="dataTableRef"
        :columns="columns"
        :dataSource="tableData"
        :fetch="loadDataList"
        :initFetch="false"
        :options="tableOptions"
        :showPageSize="false"
        @rowSelected="rowSelected"
      >
        <template #fileName="{  row }">
          <div
            class="file-item"
            @mouseenter="showOp(row)"
            @mouseleave="cancelShowOp(row)"
          >
            <template
              v-if="(row.fileType == 3 || row.fileType == 1) && row.status == 2"
            >
              <Icon :cover="row.fileCover" :width="32"></Icon>
            </template>
            <template v-else>
              <Icon v-if="row.folderType == 0" :fileType="row.fileType"></Icon>
              <Icon v-if="row.folderType == 1" :fileType="0"></Icon>
            </template>
            <span class="file-name" v-if="!row.showEdit" :title="row.fileName">
              <span @click="preview(row)">{{ row.fileName }}</span>
              <span v-if="row.status == 0" class="transfer-status">转码中</span>
              <span v-if="row.status == 1" class="transfer-status transfer-fail"
                >转码失败</span
              >
            </span>
           
            <span class="op">
              <template v-if="row.showOp && row.fileId && row.status == 2">
                <span
                  class="iconfont icon-download"
                  v-if="row.folderType == 0"
                  @click="download(row)"
                  >下载</span
                >
                <span class="iconfont icon-del" @click="delFile(row)"
                  >删除</span
                >
              </template>
            </span>
          </div>
        </template>
        <template #nickName="{ row }">
          <span>
            {{ row.nickName }}
          </span>
        </template>
        <template #fileSize="{ row }">
          <span v-if="row.fileSize">
            {{ proxy.sizeToStr.size2Str(row.fileSize) }}
          </span>
        </template>

        <template #lastUpdateTime="{ row }">
          <span>{{ row.lastUpdateTime }}</span>
        </template>
        <template #delFlag="{ row }">
          <span v-if="row.delFlag == 2" style="color: #529b2e">正常</span>
          <span v-if="row.delFlag == 1" style="color: #f56c62">回收站</span>
        </template>
      </Table>
    </div>
    <!-- 预览 -->
    <Preview ref="previewRef"></Preview>
  </div>
</template>
  
<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import {
  LoadFileList,
  DelFile,
  CreateDownloadUrlAdmin,
  DownloadAdmin,
} from "@/api/admin.js";

const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
  },
  {
    label: "发布人",
    prop: "nickName",
    scopedSlots: "nickName",
    width: 250,
  },
  {
    label: "修改时间",
    prop: "lastUpdateTime",
    scopedSlots: "lastUpdateTime",
    width: 200,
  },
  {
    label: "大小",
    prop: "fileSize",
    scopedSlots: "fileSize",
    width: 150,
  },
  {
    label: "状态",
    prop: "delFlag",
    scopedSlots: "delFlag",
    width: 150,
  },
];
// 搜索
const search = () => {
  showLoading.value = true;
  loadDataList();
};

const tableData = ref({});
const tableOptions = ref({
  extHeight: 50,
  selectType: "checkbox",
});

// 多选
const selectFileIdList = ref([]);
const rowSelected = (rows) => {
  selectFileIdList.value = [];
  rows.forEach((item) => {
    selectFileIdList.value.push(item.userId + "_" + item.fileId);
  });
};
const fileNameFuzzy = ref();
const showLoading = ref(true);
const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
    fileNameFuzzy: fileNameFuzzy.value,
    filePid: currentFolder.value.fileId,
  };
  let result = await LoadFileList(params, showLoading);
  if (!result) {
    return;
  }
  tableData.value = result.data;
};

// 目录
const currentFolder = ref({ fileId: 0 });
const navChange = (data) => {
  const { curFolder } = data;
  currentFolder.value = curFolder;
  showLoading.value = true;
  loadDataList();
};

const navigationRef = ref();
// 预览或导航跳转
const previewRef = ref();
const preview = (data) => {
  // 文件夹
  if (data.folderType == 1) {
    fileNameFuzzy.value = "";
    navigationRef.value.openFolder(data);
    return;
  }
  // 浏览文件
  if (data.status != 2) {
    proxy.Message.warning("文件未完成转码,无法预览");
    return;
  }
  previewRef.value.showPreview(data, 1);
};

// 显示操作按钮
const showOp = (row) => {
  tableData.value.list.forEach((element) => {
    element.showOp = false;
  });
  row.showOp = true;
};
// 取消操作按钮
const cancelShowOp = (row) => {
  row.showOp = false;
};

// 删除文件
const delFile = (row) => {
  proxy.Confirm(
    `你确定要删除[${row.fileName}]吗？删除的文件无法还原`,
    async () => {
      let params = {
        fileIdAndUserIds: row.userId + "_" + row.fileId,
      };
      let result = await DelFile(params);
      if (!result) {
        return;
      }
      proxy.Message.success("删除成功~")
      loadDataList();
    }
  );
};

// 批量删除文件
const delFileBetch = () => {
  if (selectFileIdList.value.length == 0) {
    return;
  }
  proxy.Confirm(`你确定要删除这些文件吗？删除的文件无法还原`, async () => {
    let params = {
      fileIdAndUserIds: selectFileIdList.value.join(","),
    };
    console.log(params)
    let result = await DelFile(params);
    if (!result) {
      return;
    }
    proxy.Message.success("删除成功~")
    loadDataList();
  });
};
// 下载文件
const download = async (row) => {
  let params = {
    userId: row.userId,
    fileId: row.fileId,
  };
  let result = await CreateDownloadUrlAdmin(params);

  if (!result) {
    return;
  }
  window.location.href = DownloadAdmin(result.data);
};
</script>
  
  <style lang="scss" scoped>
@import "@/assets/fileList.scss";
.search-panel {
  margin-left: 0px !important;
}
.file-list {
  margin-top: 10px;
  .file-item {
    .op {
      width: 120px;
    }
  }
}
</style>